<template>
  <div>
    <input type="text" name="" id="ipt" ref="ipt" />
    <button ref="btn" @click="focus">点击获得焦点</button>
    <hr />
    <HeAlert ref="alert"></HeAlert>
    <button @click="showAlert">点击弹窗</button>
  </div>
</template>

<script>
//ref核心作用:获取dom元素或者组件实例
//想要获取谁就给谁添加ref、然后通过this.$refs进行获取
//ref添加到组件上获取的是组件实例，拿到组件实例，组件内部的所有属性和方法可以任意调用
//添加到dom上获取的是dom元素
import HeAlert from './components/HmAlert.vue'
export default {
  components: {
    HeAlert,
  },

  methods: {
    focus() {
      this.$refs.ipt.focus()
      console.log(this.$refs)
    },
    showAlert() {
      this.$refs.alert.handlAlert('我是父亲')
    },
  },
}
</script>

<style></style>
